import styled from "styled-components";

export const FooterWrapped = styled.div`
  width:100%;
  min-height:172px;
  height:100%;
  border-top:1px solid #d3d3d3;
  background-color:#f3f3f3;
  
  .content{
    padding-top:15px;
    height:100px;
    display:flex;
    justify-content:space-between;
  }
`
export const FooterLeft = styled.div`
    font-size:12px;
    line-height:24px;
  .music-link{
    display:flex;
    justify-content:space-between;
    a{
      color:#999;
        &:hover{
            text-decoration:underline;
        }
    }
    span{
      color:#c2c2c2;
      margin:0 8px 0 10px;
    }
  }
  .copyright{
    color:#666;
    a{
      color:#666;
      &:hover{
        text-decoration:underline;
      }
    }
  }
  
  .report{
    color:#666;
    span:nth-child(1){
      margin-right:14px;
    }
    a{
      color:#333;
      &:hover{
        text-decoration:underline;
      }
    }
  }
  
  .info{
    display:flex;
    justify-content:space-between;
    &,a{
      color:#666;
      &:hover{
        text-decoration:underline;
      }
    }
    .police-logo{
      display:inline-block;
      height:14px;
      width:17px;
      background:url(${require("@/assets/image/police.png")
    });
    }
  }
`
export const FooterRight = styled.div`
    .other{
        display:flex;
        justify-content:space-between;
        margin-top:17px;
            & :nth-child(1) a{
                background-position:-60px -456.5px;
            }
            & :nth-child(2) a{
                background-position:-60px -101px;
            }
            & :nth-child(4) a{
                background-position:-60px -50px;
            }
            & :nth-child(5) a{
                background-position:0px -101px;
            }
            & :nth-child(1) span{
                width:72px;
                margin:5px 5px 0 -6px;
                background-position:0px -108px;
            }
            & :nth-child(2) span{
                background-position:-1px -91px;
            }
            & :nth-child(4) span{
                background-position:0 -54px;
            }
            & :nth-child(5) span{
                background-position:-1px -72px;
            }
        
        
        
        
        li{
            width:60px;
            height:70px;
            margin-left:30px;
            a {
                margin: 0 auto;
                display:block;
                width:50px;
                height:45px;
                background:url(${require("@/assets/image/sprite_footer_02.png")});
                background-size:110px 552px;
            }
            span{
                display:inline-block;
                width:52px;
                height:14px;
                margin:5px 5px 0 5px;
                background:url(${require("@/assets/image/sprite_footer_01.png")});
                background-size:180px 139px;
            }
        }
    }
`
